<template>
    <el-dialog title="分配角色" :visible="showRoleDialog" @close="btnCancel">
        <!-- el-checkbox-group选中的是 当前用户所拥有的角色  需要绑定 当前用户拥有的角色-->
        <el-checkbox-group>
            <!-- 选项 -->
            <el-checkbox-group v-model="roleIds">
                <el-checkbox v-for="item in list" :key="item.id" :label="item.id">
                    {{item.name}}
                </el-checkbox>
            </el-checkbox-group>
        </el-checkbox-group>
        <el-row slot="footer" type="flex" justify="center">
            <el-col :span="6">
                <el-button type="primary" size="small" @click="btnOK">确定</el-button>
                <el-button size="small" @click="btnCancel">取消</el-button>
            </el-col>
        </el-row>
    </el-dialog>
</template>
  
<script>
import { getRoleList } from '@/api/setting'
import { getUserDetailById } from '@/api/user'
import { assignRoles } from '@/api/employees'

export default {
    props: {
        showRoleDialog: {
            type: Boolean,
            default: false
        },
        // 用户的id 用来查询当前用户的角色信息
        userId: {
            type: String,
            default: null
        }
    },
    data() {
        return {
            list: [],
            roleIds: []
        }
    },
    created() {
        this.getRoleList()
    },
    methods: {
        async getRoleList() {
            const { rows } = await getRoleList({ page: 1, pagesize: 99 })
            this.list = rows
        },
        async getUserDetailById(id) {
            const { roleIds } = await getUserDetailById(id)
            this.roleIds = roleIds || ["604e2b25488be61b90b6877b"]  //没有权限默认员工
        },
        async btnOK() {
            await assignRoles({
                id: this.userId,
                roleIds: this.roleIds
            })
            this.$emit('update:showRoleDialog', false)
        },
        btnCancel() {
            this.$emit('update:showRoleDialog', false)
        }
    }
}
</script>